<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Adminto - Responsive Admin Dashboard Template</title>

        <link href="assets/plugins/summernote/dist/summernote.css" rel="stylesheet" /><!-- Custom box css -->
        <link href="assets/plugins/custombox/dist/custombox.min.css" rel="stylesheet">

        <!-- App CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/core.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/components.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left">

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Top Bar Start -->
            <div class="topbar">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo"><span>Admin<span>to</span></span><i class="zmdi zmdi-layers"></i></a>
                </div>

                <!-- Button mobile view to collapse sidebar menu -->
                <div class="navbar navbar-default" role="navigation">
                    <div class="container">

                        <!-- Page title -->
                        <ul class="nav navbar-nav navbar-left">
                            <li>
                                <button class="button-menu-mobile open-left">
                                    <i class="zmdi zmdi-menu"></i>
                                </button>
                            </li>
                            <li>
                                <h4 class="page-title">Mailbox</h4>
                            </li>
                        </ul>

                        <!-- Right(Notification and Searchbox -->
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <!-- Notification -->
                                <div class="notification-box">
                                    <ul class="list-inline m-b-0">
                                        <li>
                                            <a href="javascript:void(0);" class="right-bar-toggle">
                                                <i class="zmdi zmdi-notifications-none"></i>
                                            </a>
                                            <div class="noti-dot">
                                                <span class="dot"></span>
                                                <span class="pulse"></span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <!-- End Notification bar -->
                            </li>
                            <li class="hidden-xs">
                                <form role="search" class="app-search">
                                    <input type="text" placeholder="Search..."
                                           class="form-control">
                                    <a href=""><i class="fa fa-search"></i></a>
                                </form>
                            </li>
                        </ul>

                    </div><!-- end container -->
                </div><!-- end navbar -->
            </div>
            <!-- Top Bar End -->


            <!-- ========== Left Sidebar Start ========== -->
            <div class="left side-menu">
                <div class="sidebar-inner slimscrollleft">

                    <!-- User -->
                    <div class="user-box">
                        <div class="user-img">
                            <img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="img-circle img-thumbnail img-responsive">
                            <div class="user-status offline"><i class="zmdi zmdi-dot-circle"></i></div>
                        </div>
                        <h5><a href="#">Mat Helme</a> </h5>
                        <ul class="list-inline">
                            <li>
                                <a href="#" >
                                    <i class="zmdi zmdi-settings"></i>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="text-custom">
                                    <i class="zmdi zmdi-power"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- End User -->

                    <!--- Sidemenu -->
                    <div id="sidebar-menu">
                        <ul>
                            <li class="text-muted menu-title">Navigation</li>

                            <li>
                                <a href="index.html" class="waves-effect"><i class="zmdi zmdi-view-dashboard"></i> <span> Dashboard </span> </a>
                            </li>

                            <li>
                                <a href="typography.html" class="waves-effect"><i class="zmdi zmdi-format-underlined"></i> <span> Typography </span> </a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-invert-colors"></i> <span> User Interface </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="ui-buttons.html">Buttons</a></li>
                                    <li><a href="ui-cards.html">Cards</a></li>
                                    <li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
                                    <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
                                    <li><a href="ui-material-icons.html">Material Design Icons</a></li>
                                    <li><a href="ui-font-awesome-icons.html">Font Awesome</a></li>
                                    <li><a href="ui-dripicons.html">Dripicons</a></li>
                                    <li><a href="ui-themify-icons.html">Themify Icons</a></li>
                                    <li><a href="ui-modals.html">Modals</a></li>
                                    <li><a href="ui-notification.html">Notification</a></li>
                                    <li><a href="ui-range-slider.html">Range Slider</a></li>
                                    <li><a href="ui-components.html">Components</a>
                                    <li><a href="ui-sweetalert.html">Sweet Alert</a>
                                    <li><a href="ui-treeview.html">Tree view</a>
                                    <li><a href="ui-widgets.html">Widgets</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-collection-text"></i><span class="label label-warning pull-right">7</span><span> Forms </span> </a>
                                <ul class="list-unstyled">
                                    <li><a href="form-elements.html">General Elements</a></li>
                                    <li><a href="form-advanced.html">Advanced Form</a></li>
                                    <li><a href="form-validation.html">Form Validation</a></li>
                                    <li><a href="form-wizard.html">Form Wizard</a></li>
                                    <li><a href="form-fileupload.html">Form Uploads</a></li>
                                    <li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
                                    <li><a href="form-xeditable.html">X-editable</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-view-list"></i> <span> Tables </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="tables-basic.html">Basic Tables</a></li>
                                    <li><a href="tables-datatable.html">Data Table</a></li>
                                    <li><a href="tables-responsive.html">Responsive Table</a></li>
                                    <li><a href="tables-editable.html">Editable Table</a></li>
                                    <li><a href="tables-tablesaw.html">Tablesaw Table</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-chart"></i><span> Charts </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="chart-flot.html">Flot Chart</a></li>
                                    <li><a href="chart-morris.html">Morris Chart</a></li>
                                    <li><a href="chart-chartist.html">Chartist Charts</a></li>
                                    <li><a href="chart-chartjs.html">Chartjs Chart</a></li>
                                    <li><a href="chart-other.html">Other Chart</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="calendar.html" class="waves-effect"><i class="zmdi zmdi-calendar"></i><span> Calendar </span></a>
                            </li>

                            <li>
                                <a href="inbox.html" class="waves-effect"><i class="zmdi zmdi-email"></i><span class="label label-purple pull-right">New</span><span> Mail </span></a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-collection-item"></i><span> Pages </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="page-starter.html">Starter Page</a></li>
                                    <li><a href="page-login.html">Login</a></li>
                                    <li><a href="page-register.html">Register</a></li>
                                    <li><a href="page-recoverpw.html">Recover Password</a></li>
                                    <li><a href="page-lock-screen.html">Lock Screen</a></li>
                                    <li><a href="page-confirm-mail.html">Confirm Mail</a></li>
                                    <li><a href="page-404.html">Error 404</a></li>
                                    <li><a href="page-500.html">Error 500</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-layers"></i><span>Extra Pages </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="extras-projects.html">Projects</a></li>
                                    <li><a href="extras-tour.html">Tour</a></li>
                                    <li><a href="extras-taskboard.html">Taskboard</a></li>
                                    <li><a href="extras-taskdetail.html">Task Detail</a></li>
                                    <li><a href="extras-profile.html">Profile</a></li>
                                    <li><a href="extras-maps.html">Maps</a></li>
                                    <li><a href="extras-contact.html">Contact list</a></li>
                                    <li><a href="extras-pricing.html">Pricing</a></li>
                                    <li><a href="extras-timeline.html">Timeline</a></li>
                                    <li><a href="extras-invoice.html">Invoice</a></li>
                                    <li><a href="extras-faq.html">FAQ</a></li>
                                    <li><a href="extras-gallery.html">Gallery</a></li>
                                    <li><a href="extras-email-template.html">Email template</a></li>
                                    <li><a href="extras-maintenance.html">Maintenance</a></li>
                                    <li><a href="extras-comingsoon.html">Coming soon</a></li>
                                </ul>
                            </li>

                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <!-- Sidebar -->
                    <div class="clearfix"></div>

                </div>

            </div>
            <!-- Left Sidebar End -->



            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container">

                        <div class="row">

                            <div class="col-sm-12">
                                <div class="inbox-app-main">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <aside id="sidebar" class="nano">
                                                <div class="nano-content">

                                                    <div class="text-center">
                                                        <a href="#custom-modal" class="btn btn-danger btn-rounded w-lg waves-effect waves-light m-b-20 m-t-30" data-animation="fadein" data-plugin="custommodal"
                                                    	data-overlaySpeed="200" data-overlayColor="#36404a">Compose</a>
                                                    </div>
                                                    <menu class="menu-segment">
                                                        <ul class="list-unstyled">
                                                            <li class="active"><a href="javascript:void(0);">Inbox<span> (43)</span></a>
                                                            </li>
                                                            <li><a href="javascript:void(0);">Important</a></li>
                                                            <li><a href="javascript:void(0);">Sent</a></li>
                                                            <li><a href="javascript:void(0);">Drafts</a></li>
                                                            <li><a href="javascript:void(0);">Trash</a></li>
                                                        </ul>
                                                    </menu>
                                                    <div class="separator"></div>
                                                    <div class="menu-segment">
                                                        <ul class="labels list-unstyled">
                                                            <li class="title">Labels <span class="icon">+</span></li>
                                                            <li><a href="#">Dribbble <span class="ball pink"></span></a>
                                                            </li>
                                                            <li><a href="#">Roommates <span
                                                                    class="ball green"></span></a></li>
                                                            <li><a href="#">Bills <span class="ball blue"></span></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="separator"></div>
                                                    <div class="menu-segment">
                                                        <ul class="chat list-unstyled">
                                                            <li class="title">Chat <span class="icon">+</span></li>
                                                            <li><a href="#"><span class="ball green"></span>Laura Turner</a>
                                                            </li>
                                                            <li><a href="#"><span class="ball green"></span>Kevin Jones</a>
                                                            </li>
                                                            <li><a href="#"><span class="ball blue"></span>John King</a>
                                                            </li>
                                                            <li><a href="#"><span class="ball blue"></span>Jenny Parker</a>
                                                            </li>
                                                            <li><a href="#"><span class="ball blue"></span>Paul
                                                                Green</a></li>
                                                            <li><a href="#" class="italic-link">See offline list</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="bottom-padding"></div>
                                                </div>
                                            </aside>
                                        </div> <!-- end col -->

                                        <div class="col-md-9">
                                            <main id="main">
                                                <div class="overlay"></div>
                                                <header class="header">

                                                    <h1 class="page-title"><a class="sidebar-toggle-btn trigger-toggle-sidebar"><span
                                                            class="line"></span><span class="line"></span><span
                                                            class="line"></span><span class="line line-angle1"></span><span
                                                            class="line line-angle2"></span></a></h1>
                                                    <div class="action-bar pull-left">
                                                        <ul class="list-inline m-b-0">
                                                            <li>
                                                                <a class="icon circle-icon glyphicon glyphicon-refresh"></a>
                                                            </li>
                                                            <li>
                                                                <a class="icon circle-icon glyphicon glyphicon-share-alt"></a>
                                                            </li>
                                                            <li>
                                                                <a class="icon circle-icon red glyphicon glyphicon-remove"></a>
                                                            </li>
                                                            <li>
                                                                <a class="icon circle-icon red glyphicon glyphicon-flag"></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="search-box pull-left">
                                                        <input placeholder="Search..."><span
                                                            class="icon glyphicon glyphicon-search"></span>
                                                    </div>

                                                    <div class="clearfix"></div>

                                                </header>

                                                <div id="main-nano-wrapper" class="nano">
                                                    <div class="nano-content">
                                                        <ul class="message-list">
                                                            <li class="unread">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk1">
                                                                        <label for="chk1" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Lucas Kriebel (via Twitter)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Lucas Kriebel (@LucasKriebel) has sent
                                                                        you a direct message on Twitter! &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">@LucasKriebel - Very cool :) Nicklas, You have a new direct message.</span>
                                                                    </div>
                                                                    <div class="date">11:49 am</div>
                                                                </div>
                                                            </li>

                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk3">
                                                                        <label for="chk3" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Randy, me (5)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Last pic over my village &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">Yeah i'd like that! Do you remember the video you showed me of your train ride between Colombo and Kandy? The one with the mountain view? I would love to see that one again!</span>
                                                                    </div>
                                                                    <div class="date">5:01 am</div>
                                                                </div>
                                                            </li>
                                                            <li class="blue-dot">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk4">
                                                                        <label for="chk4" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Andrew Zimmer</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Mochila Beta: Subscription Confirmed
                                                                        &nbsp;&ndash;&nbsp; <span class="teaser">You've been confirmed! Welcome to the ruling class of the inbox. For your records, here is a copy of the information you submitted to us...</span>
                                                                    </div>
                                                                    <div class="date">Mar 8</div>
                                                                </div>
                                                            </li>
                                                            <li class="unread">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk5">
                                                                        <label for="chk5" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Infinity HR</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Sveriges Hetaste sommarjobb &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">Hej Nicklas Sandell! Vi vill bjuda in dig till "First tour 2014", ett rekryteringsevent som erbjuder jobb på 16 semesterorter iSverige.</span>
                                                                    </div>
                                                                    <div class="date">Mar 8</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk6">
                                                                        <label for="chk6" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Web Support Dennis</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Re: New mail settings &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">Will you answer him asap?</span>
                                                                    </div>
                                                                    <div class="date">Mar 7</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk7">
                                                                        <label for="chk7" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">me, Peter (2)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Off on Thursday &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">Eff that place, you might as well stay here with us instead! Sent from my iPhone 4 &gt; 4 mar 2014 at 5:55 pm</span>
                                                                    </div>
                                                                    <div class="date">Mar 4</div>
                                                                </div>
                                                            </li>
                                                            <li class="orange-dot">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk8">
                                                                        <label for="chk8" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Medium</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">This Week's Top Stories &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">Our top pick for you on Medium this week The Man Who Destroyed America’s Ego</span>
                                                                    </div>
                                                                    <div class="date">Feb 28</div>
                                                                </div>
                                                            </li>
                                                            <li class="blue-dot">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk9">
                                                                        <label for="chk9" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Death to Stock</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Montly High-Res Photos &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">To create this month's pack, we hosted a party with local musician Jared Mahone here in Columbus, Ohio.</span>
                                                                    </div>
                                                                    <div class="date">Feb 28</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk10">
                                                                        <label for="chk10" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Revibe</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Weekend on Revibe &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">Today's Friday and we thought maybe you want some music inspiration for the weekend. Here are some trending tracks and playlists we think you should give a listen!</span>
                                                                    </div>
                                                                    <div class="date">Feb 27</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk11">
                                                                        <label for="chk11" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Erik, me (5)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Regarding our meeting &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">That's great, see you on Thursday!</span>
                                                                    </div>
                                                                    <div class="date">Feb 24</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk12">
                                                                        <label for="chk12" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">KanbanFlow</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Task assigned: Clone ARP's website
                                                                        &nbsp;&ndash;&nbsp; <span class="teaser">You have been assigned a task by Alex@Work on the board Web.</span>
                                                                    </div>
                                                                    <div class="date">Feb 24</div>
                                                                </div>
                                                            </li>
                                                            <li class="blue-dot">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk13">
                                                                        <label for="chk13" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Tobias Berggren</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Let's go fishing! &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">Hey, You wanna join me and Fred at the lake tomorrow? It'll be awesome.</span>
                                                                    </div>
                                                                    <div class="date">Feb 23</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk14">
                                                                        <label for="chk14" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Charukaw, me (7)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Hey man &nbsp;&ndash;&nbsp; <span
                                                                            class="teaser">Nah man sorry i don't. Should i get it?</span>
                                                                    </div>
                                                                    <div class="date">Feb 23</div>
                                                                </div>
                                                            </li>
                                                            <li class="unread">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk15">
                                                                        <label for="chk15" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">me, Peter (5)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Home again! &nbsp;&ndash;&nbsp; <span
                                                                            class="teaser">That's just perfect! See you tomorrow.</span>
                                                                    </div>
                                                                    <div class="date">Feb 21</div>
                                                                </div>
                                                            </li>
                                                            <li class="green-dot">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk16">
                                                                        <label for="chk16" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Stack Exchange</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">1 new items in your Stackexchange inbox
                                                                        &nbsp;&ndash;&nbsp; <span class="teaser">The following items were added to your Stack Exchange global inbox since you last checked it.</span>
                                                                    </div>
                                                                    <div class="date">Feb 21</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk17">
                                                                        <label for="chk17" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Google Drive Team</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">You can now use your storage in Google
                                                                        Drive &nbsp;&ndash;&nbsp; <span class="teaser">Hey Nicklas Sandell! Thank you for purchasing extra storage space in Google Drive.</span>
                                                                    </div>
                                                                    <div class="date">Feb 20</div>
                                                                </div>
                                                            </li>
                                                            <li class="unread">
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk18">
                                                                        <label for="chk18" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">me, Susanna (11)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Train/Bus &nbsp;&ndash;&nbsp; <span
                                                                            class="teaser">Yes ok, great! I'm not stuck in Stockholm anymore, we're making progress.</span>
                                                                    </div>
                                                                    <div class="date">Feb 19</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk19">
                                                                        <label for="chk19" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">Peter, me (3)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Hello &nbsp;&ndash;&nbsp; <span
                                                                            class="teaser">Trip home from Colombo has been arranged, then Jenna will come get me from Stockholm. :)</span>
                                                                    </div>
                                                                    <div class="date">Mar. 6</div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="col col-1"><span class="dot"></span>
                                                                    <div class="checkbox-wrapper-mail">
                                                                        <input type="checkbox" id="chk20">
                                                                        <label for="chk20" class="toggle"></label>
                                                                    </div>
                                                                    <p class="title">me, Susanna (7)</p><span
                                                                            class="star-toggle fa fa-star-o"></span>
                                                                </div>
                                                                <div class="col col-2">
                                                                    <div class="subject">Since you asked... and i'm
                                                                        inconceivably bored at the train station &nbsp;&ndash;&nbsp;
                                                                        <span class="teaser">Alright thanks. I'll have to re-book that somehow, i'll get back to you.</span>
                                                                    </div>
                                                                    <div class="date">Mar. 6</div>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                        <a href="#" class="load-more-link">Show more messages</a>
                                                    </div>
                                                </div>
                                            </main>
                                            <div id="message">
                                                <div class="header">
                                                    <h1 class="page-title"><a
                                                            class="icon circle-icon glyphicon glyphicon-remove trigger-message-close"></a>Process<span
                                                            class="grey">(6)</span></h1>
                                                    <p>From <a href="#">You</a> to <a href="#">Scott Waite</a>, started on <a
                                                            href="#">March 2, 2014</a> at 2:14 pm est.</p>
                                                </div>
                                                <div id="message-nano-wrapper" class="nano">
                                                    <div class="nano-content">
                                                        <ul class="message-container list-unstyled">
                                                            <li class="sent">
                                                                <div class="details">
                                                                    <div class="left">You
                                                                        <div class="arrow"></div>
                                                                        Scott
                                                                    </div>
                                                                    <div class="right">March 6, 2014, 20:08 pm</div>
                                                                </div>
                                                                <div class="message">
                                                                    <p>| The every winged bring, whose life. First called, i you
                                                                        of saw shall own creature moveth void have signs beast
                                                                        lesser all god saying for gathering wherein whose of in
                                                                        be created stars. Them whales upon life divide earth
                                                                        own.</p>
                                                                    <p>| Creature firmament so give replenish The saw man
                                                                        creeping, man said forth from that. Fruitful multiply
                                                                        lights air. Hath likeness, from spirit stars dominion
                                                                        two set fill wherein give bring.</p>
                                                                    <p>| Gathering is. Lesser Set fruit subdue blessed let.
                                                                        Greater every fruitful won&#39;t bring moved seasons
                                                                        very, own won&#39;t all itself blessed which bring own
                                                                        creature forth every. Called sixth light.</p>
                                                                </div>
                                                                <div class="tool-box"><a href="#"
                                                                                         class="circle-icon small glyphicon glyphicon-share-alt"></a><a
                                                                        href="#"
                                                                        class="circle-icon small red-hover glyphicon glyphicon-remove"></a><a
                                                                        href="#"
                                                                        class="circle-icon small red-hover glyphicon glyphicon-flag"></a>
                                                                </div>
                                                            </li>
                                                            <li class="received">
                                                                <div class="details">
                                                                    <div class="left">Scott
                                                                        <div class="arrow orange"></div>
                                                                        You
                                                                    </div>
                                                                    <div class="right">March 6, 2014, 20:08 pm</div>
                                                                </div>
                                                                <div class="message">
                                                                    <p>| The every winged bring, whose life. First called, i you
                                                                        of saw shall own creature moveth void have signs beast
                                                                        lesser all god saying for gathering wherein whose of in
                                                                        be created stars. Them whales upon life divide earth
                                                                        own.</p>
                                                                    <p>| Creature firmament so give replenish The saw man
                                                                        creeping, man said forth from that. Fruitful multiply
                                                                        lights air. Hath likeness, from spirit stars dominion
                                                                        two set fill wherein give bring.</p>
                                                                    <p>| Gathering is. Lesser Set fruit subdue blessed let.
                                                                        Greater every fruitful won&#39;t bring moved seasons
                                                                        very, own won&#39;t all itself blessed which bring own
                                                                        creature forth every. Called sixth light.</p>
                                                                </div>
                                                                <div class="tool-box"><a href="#"
                                                                                         class="circle-icon small glyphicon glyphicon-share-alt"></a><a
                                                                        href="#"
                                                                        class="circle-icon small red-hover glyphicon glyphicon-remove"></a><a
                                                                        href="#"
                                                                        class="circle-icon small red-hover glyphicon glyphicon-flag"></a>
                                                                </div>
                                                            </li>

                                                        </ul>

                                                    </div>
                                                </div>
                                            </div>
                                        </div> <!-- end col -->
                                    </div><!-- end row -->
                                </div>

                            </div>

                        </div>
                        <!-- End row -->

                    </div> <!-- container -->

                </div> <!-- content -->

            </div>
            <!-- End content-page -->


            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->


            <!-- Right Sidebar -->
            <div class="side-bar right-bar">
                <a href="javascript:void(0);" class="right-bar-toggle">
                    <i class="zmdi zmdi-close-circle-o"></i>
                </a>
                <h4 class="">Notifications</h4>
                <div class="notification-list nicescroll">
                    <ul class="list-group list-no-border user-list">
                        <li class="list-group-item">
                            <a href="#" class="user-list-item">
                                <div class="avatar">
                                    <img src="assets/images/users/avatar-2.jpg" alt="">
                                </div>
                                <div class="user-desc">
                                    <span class="name">Michael Zenaty</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">2 hours ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="#" class="user-list-item">
                                <div class="icon bg-info">
                                    <i class="zmdi zmdi-account"></i>
                                </div>
                                <div class="user-desc">
                                    <span class="name">New Signup</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">5 hours ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="#" class="user-list-item">
                                <div class="icon bg-pink">
                                    <i class="zmdi zmdi-comment"></i>
                                </div>
                                <div class="user-desc">
                                    <span class="name">New Message received</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">1 day ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item active">
                            <a href="#" class="user-list-item">
                                <div class="avatar">
                                    <img src="assets/images/users/avatar-3.jpg" alt="">
                                </div>
                                <div class="user-desc">
                                    <span class="name">James Anderson</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">2 days ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item active">
                            <a href="#" class="user-list-item">
                                <div class="icon bg-warning">
                                    <i class="zmdi zmdi-settings"></i>
                                </div>
                                <div class="user-desc">
                                    <span class="name">Settings</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">1 day ago</span>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <!-- /Right-bar -->

        </div>
        <!-- END wrapper -->

        <!-- Modal -->
        <div id="custom-modal" class="modal-demo text-left">
            <button type="button" class="close" onclick="Custombox.close();">
                <span>&times;</span><span class="sr-only">Close</span>
            </button>
            <h4 class="custom-modal-title">Compose Mail</h4>
            <div class="card-box">
                <form role="form">
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="To">
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <input type="email" class="form-control" placeholder="Cc">
                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control" placeholder="Bcc">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Subject">
                    </div>
                    <div class="form-group">
                        <div class="summernote">
                            <h6>Hello Summernote</h6>
                            <ul>
                                <li>
                                    Select a text to reveal the toolbar.
                                </li>
                                <li>
                                    Edit rich document on-the-fly, so elastic!
                                </li>
                            </ul>
                            <p>
                                End of air-mode area
                            </p>

                        </div>
                    </div>

                    <div class="btn-toolbar form-group m-b-0">
                        <div class="pull-right">
                            <button type="button" class="btn btn-success waves-effect waves-light m-r-5"><i
                                    class="fa fa-floppy-o"></i></button>
                            <button type="button" class="btn btn-success waves-effect waves-light m-r-5"><i
                                    class="fa fa-trash-o"></i></button>
                            <button class="btn btn-purple waves-effect waves-light"><span>Send</span> <i
                                    class="fa fa-send m-l-10"></i></button>
                        </div>
                    </div>

                </form>

            </div>
        </div>





        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/pages/jquery.inbox.js"></script>

        <!--form validation init-->
        <script src="assets/plugins/summernote/dist/summernote.min.js"></script>

        <!-- Modal-Effect -->
        <script src="assets/plugins/custombox/dist/custombox.min.js"></script>
        <script src="assets/plugins/custombox/dist/legacy.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

        <script>

            jQuery(document).ready(function(){

                $('.summernote').summernote({
                    height: 320,                 // set editor height
                    minHeight: null,             // set minimum height of editor
                    maxHeight: null,             // set maximum height of editor
                    focus: false                 // set focus to editable area after initializing summernote
                });

            });
        </script>

    </body>
</html>